<template>
  <view class="content">
    <view>
      <view class="bg_image">
        <view class="header" :style="{ 'padding-top': marTop + 'px' }">
          <view>
            <image
              @click="callback"
              class="icon_right"
              src="../../static/images/icon_white.png"
            ></image>
          </view>
          <!-- <view class="title">首页</view> -->
        </view>
        <view style="padding-top: 80rpx;">
          <view class="doctorinfoCard" v-if="doctorData.type == 1">
            <view style="display: flex;">
              <view class="doctor_header">
                <image v-if="doctorData.icon" :src="doctorData.icon"></image>
                <image
                  v-else
                  src="../../static/images/icon_head@2x.png"
                ></image>
              </view>
              <view class="doctorInfo">
                <view style="font-size: 34rpx; font-weight: bold;">
                  {{ doctorData.name ? doctorData.name : '' }}
                </view>
                <view style="margin-top: 5rpx;">
                  <text>
                    {{ doctorData.deptName ? doctorData.deptName : '' }}
                  </text>
                  <text v-show="doctorData.jobTitle" style="padding: 0 10rpx;">
                    |
                  </text>
                  <text>
                    {{ doctorData.jobTitle ? doctorData.jobTitle : '' }}
                  </text>
                </view>
                <view style="margin-top: 5rpx;" class="gray_font">
                  {{ doctorData.hospitalName ? doctorData.hospitalName : '' }}
                </view>
              </view>
            </view>
            <view>
              <view>
                <view class="goodat">
                  <view>医生擅长：</view>
                  <view
                    :class="areastatus == 0 ? 'csover' : 'csoverexper'"
                    style="color: #7c7c7c; font-size: 30rpx;"
                  >
                    {{
                      doctorData.areasExpertise ? doctorData.areasExpertise : '暂无'
                    }}
                  </view>
                </view>
                <view v-if="doctorData.areasExpertise.length > 20">
                  <view
                    class="fontStyle"
                    v-if="areastatus == 0"
                    @click="checkall"
                  >
                    查看全部
                  </view>
                  <view
                    class="fontStyle"
                    v-if="areastatus == 1"
                    @click="checkover"
                  >
                    收起
                  </view>
                </view>
              </view>
              <view>
                <view class="goodat" style="margin-top: 30rpx;">
                  <view>个人简介：</view>
                  <view
                    :class="brieftatus == 0 ? 'csover' : 'csoverexper'"
                    style="color: #7c7c7c; font-size: 30rpx;"
                  >
                    {{
                      doctorData.briefIntroduction
                        ? doctorData.briefIntroduction
                        : '暂无简介'
                    }}
                  </view>
                </view>
                <view v-if="doctorData.briefIntroduction.length > 20">
                  <view
                    class="fontStyle"
                    v-if="brieftatus == 0"
                    @click="birefall"
                  >
                    查看全部
                  </view>
                  <view
                    class="fontStyle"
                    v-if="brieftatus == 1"
                    @click="birefover"
                  >
                    收起
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="doctorinfoCard" v-else>
            <view style="display: flex;">
              <view class="doctor_header">
                <image
                  v-if="doctorData.storeLogo"
                  :src="doctorData.storeLogo"
                ></image>
                <image
                  v-else
                  src="../../static/images/icon_head@2x.png"
                ></image>
              </view>
              <view class="doctorInfo" style="width: 70%;">
                <view style="font-size: 34rpx; font-weight: bold;">
                  {{ doctorData.storeName ? doctorData.storeName : '' }}
                </view>
                <view style="margin-top: 5rpx;">
                  <text>
                    {{ doctorData.name ? doctorData.name : '' }}
                  </text>
                </view>
                <view style="margin-top: 5rpx;" class="gray_font">
                  {{ doctorData.storeAddress ? doctorData.storeAddress : '' }}
                </view>
              </view>
            </view>
            <view>
              <!--              <view>-->
              <!--                <view class="goodat">-->
              <!--                  <view>药房简介：</view>-->
              <!--                  <view-->
              <!--                      :class="areastatus==0?'csover':'csoverexper'"-->
              <!--                      style="color: #7C7C7C;font-size: 30rpx;">-->
              <!--                    {{doctorData.areasExpertise?doctorData.areasExpertise:''}}-->
              <!--                  </view>-->
              <!--                </view>-->
              <!--                <view v-if="doctorData.areasExpertise.length>20">-->
              <!--                  <view class="fontStyle" v-if="areastatus==0" @click="checkall">查看全部</view>-->
              <!--                  <view class="fontStyle" v-if="areastatus==1" @click="checkover">收起</view>-->
              <!--                </view>-->

              <!--              </view>-->
              <view>
                <!-- <view class="goodat" style="margin-top: 30rpx;">
                  <view>药店简介：</view>
                  <view
                    :class="brieftatus == 0 ? 'csover' : 'csoverexper'"
                    style="color: #7c7c7c; font-size: 30rpx;"
                  >
                    {{
                      doctorData.briefIntroduction
                        ? doctorData.briefIntroduction
                        : '暂无简介'
                    }}
                  </view>
                </view> -->
                <view v-if="doctorData.briefIntroduction.length > 20">
                  <view
                    class="fontStyle"
                    v-if="brieftatus == 0"
                    @click="birefall"
                  >
                    查看全部
                  </view>
                  <view
                    class="fontStyle"
                    v-if="brieftatus == 1"
                    @click="birefover"
                  >
                    收起
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="service" v-if="doctorData.storeName!='如泉甄选'">
            <view class="icon_line_green"></view>
            <view style="margin-left: 30rpx;">药店服务</view>
          </view>
          <view class="servicecard" v-if="doctorData.storeName!='如泉甄选'">
            <view style="display: flex; justify-content: space-between;">
              <view style="display: flex;">
                <view>
                  <image
                    class="img_icon"
                    src="../../static/images/icon_h_jia@2x.png"
                  ></image>
                </view>
                <view class="service_content">
                  <view style="margin-top: 5rpx;" class="servicetitle">
                    用药咨询
                  </view>
                  <view style="margin-top: 15rpx;">24小时用药咨询服务</view>
                </view>
              </view>
              <view>
                <view
                  @click="tofreepage"
                  class="btn_small"
                  style="margin-top: 20rpx;"
                >
                  <!--                   v-if="doctorData.isOpen == 0" -->
                  去咨询
                  <image
                    style="width: 20rpx; height: 20rpx;"
                    src="../../static/images/write_icon.png"
                  ></image>
                </view>
                <!-- <view v-else class="btn_small_gary" style="margin-top: 20rpx;">
                  未开通
                  <image
                    style="width: 20rpx; height: 20rpx;"
                    src="../../static/images/gray_icon.png"
                  ></image>
                </view> -->
              </view>
            </view>
          </view>
          <view class="servicecard" v-if="doctorData.storeName!='如泉甄选'">
            <view style="display: flex; justify-content: space-between;">
              <view style="display: flex;">
                <view>
                  <image
                    class="img_icon"
                    src="../../static/images/icon_h_shen@2x.png"
                  ></image>
                </view>
                <view class="service_content">
                  <view class="servicetitle" style="margin-top: 25rpx;">
                    线上复购
                  </view>
                </view>
              </view>
              <view>
                <view
                  @click="toDoctorPage"
                  class="btn_small"
                  style="margin-top: 20rpx;"
                >
                  <!--                   v-if="doctorData.isOpen == 0" -->
                  去复购
                  <image
                    style="width: 20rpx; height: 20rpx;"
                    src="../../static/images/write_icon.png"
                  ></image>
                </view>
                <!-- <view v-else class="btn_small_gary" style="margin-top: 20rpx;">
                  未开通
                  <image
                    style="width: 20rpx; height: 20rpx;"
                    src="../../static/images/gray_icon.png"
                  ></image>
                </view> -->
              </view>
            </view>
          </view>
        </view>
      </view>
    <hover-ball v-if="(doctorData.listPhone).length>0" :listPhone='doctorData.listPhone' />

    </view>
  </view>
</template>

<script>
import { doctorDetail, bindDoctor } from '@/api/user.js'
import store from '@/store'
import hoverBall from '@/components/hover-ball/hover-ball-param.vue';

import {
  openWenzhenSubscribe,
  weChatListTempSet,
} from '@/utils/SubscribeMessage.js'
export default {
  components: {
        hoverBall,
    },
  data() {
    return {
      // storePhone:'', //电话
      marTop: 0,
      doctorData: {
        areastatus: 0,
      },
      id: 0,
      areastatus: 0,
      brieftatus: 0,
      serviceId:'', //药店id或医生id
    }
  },
  onShow() {
    const res = wx.getMenuButtonBoundingClientRect()
    this.marTop = res.top + 5
    //检查缓存是否有模板，如果有不处理，如果没有缓存模板
    weChatListTempSet()
      .then((res) => {})
      .catch((err) => {
        console.log(err)
      })

    this.getDoctorDetail()
  },
  onLoad(option){
    if(option.id){
      console.log(option,option.id,'关注药店传进来的参数')
      this.serviceId = option.id;
    }
    
  },
  methods: {
    openSubscribe: function (e) {
      openWenzhenSubscribe()
        .then((res) => {})
        .catch((err) => {
          console.log(err)
        })
    },
    checkall() {
      this.areastatus = 1
    },
    birefall() {
      this.brieftatus = 1
    },
    birefover() {
      this.brieftatus = 0
    },
    checkover() {
      this.areastatus = 0
    },
    callback() {
      const pages = getCurrentPages()
      // console.log('pages----',pages)
      if (pages.length === 1) {
        uni.switchTab({
          url: '/pages/homePage/index',
        })
      } else {
        uni.navigateBack()
      }
    },
    // goto(url, checkStatus) {
    //   uni.navigateTo({
    //     url: url,
    //   })
    // },
    toDoctorPage() {
      uni.navigateTo({
        url: '/pagesSub-My/my/againOrder',
      })
    },
    tofreepage() {
      let info = encodeURIComponent(JSON.stringify(this.doctorData))

      uni.navigateTo({
        // url: `/pagesSub/homePage/consult/choosePeople?type=2`//跳转到免费义诊
        // utl:``;
        url: `/pagesSub/homePage/prescribing/serviceChoosePeople?serviceInfo=${info} `, //跳转到选择就诊人
      })
    },
    //去问诊items:1付费问诊 2 免费义诊
    // toConsult(type) {
    //   openWenzhenSubscribe()
    //     .then((res) => {
    //       uni.redirectTo({
    //         url: `/pagesSub/homePage/consult/choosePeople?type=${type}`,
    //       })
    //     })
    //     .catch((err) => {
    //       console.log(err)
    //     })
    // },
    // toRePurchase() {
    //   openWenzhenSubscribe()
    //     .then((res) => {
    //       uni.redirectTo({
    //         url: `/pagesSub/homePage/prescribing/choosePeople`,
    //       })
    //     })
    //     .catch((err) => {
    //       console.log(err)
    //     })
    // },

    getDoctorDetail: function () {
      let _this = this
      uni.showLoading({
        title: '加载中',
      })
      //获取当前绑定的医生缓存中
      let serviceIdParam =  this.serviceId  || store.state.app.serviceUid
      doctorDetail(serviceIdParam)
        .then((res) => {
          _this.doctorData = res.data
          uni.hideLoading()
        })
        .catch((err) => {
          console.log(err)
          uni.hideLoading()
          _this.$util.Prom(500, err)
        })
    },
  },
}
</script>

<style scoped>
.bg_image {
  background-image: url(../../static/images/bg_h_doc@2x.png);
  width: 100%;
  height: 320rpx;
  background-size: 100% 100%;
  position: relative;
}
.doctorinfoCard {
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  border-radius: 10rpx;
  margin: 0 30rpx;
}
.doctor_header {
  border-radius: 100%;
  background-color: #ffffff;
  width: 130rpx;
  height: 130rpx;
  margin-top: -70rpx;
  margin-left: 20rpx;
}
.doctor_header image {
  height: 100%;
  width: 100%;
  border-radius: 100%;
}
.doctorInfo {
  margin-left: 30rpx;
  font-size: 30rpx;
}
.goodat {
  display: flex;
  margin-top: 20rpx;
  font-size: 32rpx;
}
.service {
  display: flex;
  margin-top: 40rpx;
  font-size: 33rpx;
  font-weight: bold;
  letter-spacing: 3rpx;
}
.icon_line_green {
  height: 35rpx;
  padding: 4rpx;
  border-top-right-radius: 40rpx;
  border-bottom-right-radius: 40rpx;
  background-color: #4fcbbf;
  position: absolute;
  left: 0;
}
.servicecard {
  padding: 30rpx;
  margin: 30rpx;
  background-color: #ffffff;
  border-radius: 10rpx;
}
.img_icon {
  width: 65rpx;
  height: 65rpx;
  margin-top: 15rpx;
}
.service_content {
  margin-left: 30rpx;
  font-size: 29rpx;
}
.servicetitle {
  font-size: 31rpx;
  font-weight: bold;
  letter-spacing: 3rpx;
}
.btn_small {
  font-size: 27rpx;
  color: #ffffff;
  padding: 2rpx 15rpx;
  text-align: center;
  border-radius: 40rpx;
  background: -webkit-linear-gradient(#77e2a4, #4ccdbc);
  height: 50rpx;
  line-height: 50rpx;
}
.btn_small_gary {
  font-size: 27rpx;
  color: #6e6e6e;
  padding: 2rpx 15rpx;
  text-align: center;
  border-radius: 40rpx;
  background: #e6e6e5;
  height: 50rpx;
  line-height: 50rpx;
}
.header {
  display: flex;
}
.header > .title {
  color: #ffffff;
  font-size: 35rpx;
  margin-left: 35%;
}
.icon_right {
  width: 55rpx;
  height: 55rpx;
}
.csover {
  width: 70%;
  overflow: hidden;
  white-space: normal;
  word-break: break-all;
  height: 83rpx;
}
.csoverexper {
  width: 70%;
  overflow: hidden;
  white-space: normal;
  word-break: break-all;
  min-height: 83rpx;
}
.fontStyle {
  font-size: 29rpx;
  margin-left: 45%;
  color: #4cccbf;
}
</style>
